import React,{useEffect,useState} from "react"
import { useHistory } from "react-router-dom"
import styles from "./Search.module.scss"
import useStore from "../../context/store"
import {useObserver} from 'mobx-react-lite'
import useThrottle from "../../hooks/useThrotte"
const Search: React.FC = () => {
    let {search}=useStore()
    let history = useHistory()
    let [ser,setSer]=useState<string>('')
    let [flag,setFlag]=useState<boolean>(false)
    let [arr,setArr]=useState<string[]>([])
    let [oldFlag,setOldFlag]=useState<boolean>(false)
    function goBack() {
        history.goBack()
    }
    useEffect(()=>{
        let brr:string[]=JSON.parse(sessionStorage.getItem('arr'))
        setArr(brr)
        if(brr){
            setOldFlag(true)
        }
    },[])
    // let searchTip = useThrottle(search.getSearch.bind(search))
    useEffect(() => {
        search.searchHotList()
        if(ser!==''){
            setFlag(true)
            search.getSearch(ser)
        }else{
            setFlag(false)
        }
    }, [ser,search])
    function onSearch(){
        if(JSON.parse(sessionStorage.getItem('arr'))){
            let brr=JSON.parse(sessionStorage.getItem('arr'))
            brr.push(ser)
            setArr(brr)
            sessionStorage.setItem('arr',JSON.stringify(brr))
        }else{
            let brr=[]  
            brr.push(ser)
            setArr(brr)
            sessionStorage.setItem('arr',JSON.stringify(brr))
        }
        setOldFlag(true)
        history.push({
            pathname:'/index/searchResult',
        })
    }
    function removeOld(){
        sessionStorage.removeItem('arr')
        setOldFlag(false)
    }
    return useObserver(()=><div className={styles.wrap}>
        <header className='header'>
            <div className={styles.push} onClick={goBack}>
                {'<'}
            </div>
            <div className={styles.text} >
                搜索
            </div>
        </header>
        <div className={styles.search}>
            <svg className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1180" width="200" height="200"><path d="M446.112323 177.545051c137.567677 0.219798 252.612525 104.59798 266.162424 241.493333 13.562828 136.895354-78.778182 261.818182-213.617777 289.008485-134.852525 27.203232-268.386263-52.156768-308.945455-183.608889s25.018182-272.252121 151.738182-325.779394A267.235556 267.235556 0 0 1 446.112323 177.545051m0-62.060607c-182.794343 0-330.989899 148.195556-330.989899 330.989899s148.195556 330.989899 330.989899 330.989899 330.989899-148.195556 330.989899-330.989899-148.195556-330.989899-330.989899-330.989899z m431.321212 793.341415a30.849293 30.849293 0 0 1-21.94101-9.102223l-157.220202-157.220202c-11.752727-12.179394-11.584646-31.534545 0.37495-43.50707 11.972525-11.972525 31.327677-12.140606 43.494141-0.37495l157.220202 157.220202a31.036768 31.036768 0 0 1 6.723232 33.810101 31.004444 31.004444 0 0 1-28.651313 19.174142z m0 0" p-id="1181"></path></svg>
            <input type="text" placeholder='搜索一切你想知道的排名' value={ser} onChange={e=>setSer(e.target.value)}/>
            <button onClick={onSearch}>搜索</button>
        </div>
        {
            flag?<div className={styles.searchContent}>
                {
                    search.list.map((item,index)=>{
                        return <div key={index}>
                            {item.name}
                        </div>
                    })
                }
            </div>:null
        }
        {
           oldFlag&&<div>
            <div className={styles.svg}>
                <h3>历史搜索</h3>
                <svg onClick={removeOld} className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2551" width="200" height="200"><path d="M517.59 21.609c-100.299 0-181.703 79.514-185.167 179.34H98.603c-25.979 0-47.235 21.099-47.235 47.236 0 25.98 21.099 47.237 47.236 47.237h52.117v528.416c0 99.196 67.233 180.285 150.37 180.285h423.55c82.98 0 150.37-80.616 150.37-180.285V295.737h47.236c25.98 0 47.236-21.1 47.236-47.237 0-25.98-21.099-47.236-47.236-47.236H702.441C699.449 101.124 617.888 21.61 517.59 21.61z m-96.677 179.34c3.464-51.172 45.19-90.85 96.834-90.85s93.37 39.835 96.362 90.85H420.913z m-119.98 714.842c-29.444 0-61.88-37.789-61.88-91.953V295.737h547.311V824.31c0 54.007-32.436 91.954-61.88 91.954H300.933v-0.473z m0 0" p-id="2552"></path><path d="M364.387 802.267c21.57 0 39.363-21.571 39.363-48.653V476.022c0-27.082-17.635-48.654-39.363-48.654-21.572 0-39.364 21.572-39.364 48.654v277.592c0 26.924 17.32 48.653 39.364 48.653z m142.496 0c21.571 0 39.363-21.571 39.363-48.653V476.022c0-27.082-17.635-48.654-39.363-48.654-21.571 0-39.364 21.572-39.364 48.654v277.592c0 26.924 17.793 48.653 39.364 48.653z m149.896 0c21.571 0 39.364-21.571 39.364-48.653V476.022c0-27.082-17.635-48.654-39.364-48.654-21.571 0-39.363 21.572-39.363 48.654v277.592c0 26.924 17.162 48.653 39.363 48.653z m0 0" p-id="2553"></path></svg>
            </div>
            <div className={styles.old}>
            {
                arr&&arr.map((item,index)=>{
                    return <div key={index}>
                      <span>{item}</span>
                    </div>
                })
            }
            </div>
        </div>
        }
        <div className='hot'>
            <h3>热门搜索</h3>
            <div className={styles.style}>
            {
                search.hotList.map((item,index)=>{
                    return <div key={index}>
                        <span className={index<4?styles.active:''}>{index+1}、</span><span>{item}</span>
                    </div>
                })
            }
            </div>
        </div>
    </div>)
}
export default Search